<!-- 轮播图 -->
<template>
	<view class="swiper">
		<view class="swiper-box">
			<swiper  :indicator-color="itemStyle.btnColor" circular="true" autoplay="true" :indicator-dots="indicatorDots" :interval="params.interval" :duration="duration">
				<swiper-item v-for="swiper in itemData" :key="swiper.id">
					<image :src="swiper.imgUrl" @tap="toSwiper(swiper.linkUrl)"></image>
				</swiper-item>
			</swiper>
		</view>
	</view>

</template>


<script>
	export default {
		props: {
			// itemIndex:{},
			itemStyle: {},
			params: {},
			itemData: {}
		},
		data() {
			return {
				indicatorDots: true, //指示点
				autoplay: true, //自动播放
				duration: 500 //幻灯片切换时长(ms)
			}
		},
		methods: {
			//轮播图跳转1
			toSwiper(e) {
				let url = e;
				
				if (url == '') {
					return
				}else if(url.substring(0,4) == 'page'){
					return this.navigationTo({
					//只能跳转到程序内页面
					url: url
					});
				}else{
					return this.openBrowser(url)
				}
			},
		}
	}
</script>

<style lang="scss">
	.swiper {
		width: 100%;
		// margin-top: 10upx;
		display: flex;
		justify-content: center;

		.swiper-box {
			width: 100%;
			height: 50.7vw;

			overflow: hidden;
			// border-radius: 15upx;
			// box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;

			swiper {
				width: 100%;
				height: 50.7vw;

				swiper-item {
					image {
						width: 100%;
						height: 50.7vw;
					}
				}
			}

			.indicator {
				position: absolute;
				bottom: 20upx;
				left: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;

				.dots {
					width: 100%;

					&.on {
						background-color: rgba(255, 255, 255, 1);
					}
				}
			}
		}
	}
</style>
